<template>
  <div>
    <!-- 在 DOM 里使用 ref 可以自动解包 -->
    <div>{{ num }}</div>
    <button @click="num++">num++</button>
    <button @click="numChange">numChange</button>
    <hr>
    <div>{{ obj.name }}</div>
    <div>{{ obj.age }}</div>
    <button @click="changeAge">changAge</button>
    <hr>
    <div>{{ likes }}</div>
    <button @click="chagneLikes">chagneLikes</button>
    <!-- 解构 赋值 传参 -->
    <div>ref proxy.count ==> {{ proxy.count }}</div>
    <!-- <div>ref count ==> {{ c }}</div> -->
    <button @click="changeCount">changCount</button>
    <button @click="addCount(proxy.count)">addCount</button>
    <!--  -->
    <hr>
    <div>foo:{{ foo + 1 }}</div>
    <div>bar:{{ bar }}</div>
    <button @click="changeFoo">changeFoo</button>
    <button @click="changeFoo2(foo)">changeFoo2</button>
    <hr>
    <div> obj2.foo + 1 == > {{ obj2.foo + 1 }}</div>
    <hr>
    <button @click="changeCount"> count2=={{ count2 }}</button>
  </div>
</template>
<script setup>
import {ref,reactive} from 'vue'
// ref 支持所有数据类型
const num = ref(0)
console.log("num===>",num);
// js 中操作 ref 必须加 .value
const numChange = ()=>{
  num.value++
}

const obj = ref({
  name:'赵六',
  age:18
})

const likes = ref(['coding','sport'])
const changeAge = ()=>{
  obj.value.age++
}
const chagneLikes = ()=>{
  likes.value.push('reading')
}


// 解构 赋值 传参

// const proxy = ref({count:ref(3)})

// let {count} = proxy.value
// const changeCount = ()=>{
//   count++
//   console.log("count==>",count);
// }


// let c = proxy.value.count
// const changeCount = ()=>{
//   c++
//   console.log("c==>",c);
// }

// const addCount = (params)=>{
//   params++
//   console.log("params==>",params);
// }

// addCount(proxy.value.count)


const proxy = reactive({count:0})

let {count} = proxy
// const changeCount = ()=>{
//   count++
//   console.log("count==>",count);
//   console.log("proxy.count==>",proxy.count);
// }

// let c = proxy.count
// const changeCount = ()=>{
//   c++
//   console.log("c==>",c);
//   console.log("proxy.count==>",proxy.count);
// }

const changCount = (c)=>{
  console.log();
  c++
  console.log("c==>",c);
  console.log("proxy.count==>",proxy.count);
}

changCount(proxy.count)


const obj2 = {
  foo: ref(1),
  bar: ref(2)
}

const {foo,bar} = obj2
// const changeFoo = ()=>{
//   // console.log("foo=>",foo);
//   foo.value++
// }

let f = obj2.foo
// const changeFoo = ()=>{
//   // console.log("foo=>",foo);
//   // foo.value++
//   f.value++
// }

const changeFoo2 = (f)=>{
  // console.log("foo=>",foo);
  // foo.value++
  // f.value++
  console.log(f);
}

changeFoo2(obj2.foo)

// reactive 中的 ref 会自动解包
const c = ref(0)
const proxyObj = reactive({c})
proxyObj.c++
console.log(proxyObj.c);


let count2 = $ref(33)
console.log("count2===>",count2);
const changeCount = ()=>{
  count2++
}
</script>
